<template>
  <div class="logic-flow-view">
    <!-- 辅助工具栏 -->
    <Control
        class="demo-control"
        v-if="lf"
        :lf="lf"
        :flow-id="flowId"
        @catData="$_catData"
    ></Control>
    <!-- 节点面板 -->
    <NodePanel v-if="lf" :lf="lf" :nodeList="nodeList"></NodePanel>
    <!-- 画布 -->
    <div id="LF-view" ref="container"></div>
    <!-- 用户节点自定义操作面板 -->
    <AddPanel
        v-if="showAddPanel"
        class="add-panel"
        :style="addPanelStyle"
        :lf="lf"
        :nodeData="addClickNode"
        @addNodeFinish="hideAddPanel"
    >
    </AddPanel>
    <!-- 属性面板 -->
    <el-dialog
        title="节点配置"
        v-model="dialogVisible"
        width="800"
        :before-close="closeDialog"
        :draggable="true"
        :close-on-click-modal="false"
    >
      <PropertyDialog
          v-if="dialogVisible"
          :nodeData="clickNode"
          :lf="lf"
          @setPropertiesFinish="closeDialog"
      ></PropertyDialog>
    </el-dialog>
    <!-- 数据查看面板 -->
    <el-dialog title="数据" width="50%" v-model="dataVisible" align-center>
      <DataDialog :graphData="graphData"></DataDialog>
    </el-dialog>
  </div>
</template>
<script>
import LogicFlow from "@logicflow/core";
import {Menu, Snapshot, MiniMap} from "@logicflow/extension";
import "@logicflow/core/dist/style/index.css";
import "@logicflow/extension/lib/style/index.css";
import NodePanel from "./LFComponents/NodePanel.vue";
import AddPanel from "./LFComponents/AddPanel.vue";
import Control from "./LFComponents/Control.vue";
import PropertyDialog from "./PropertySetting/PropertyDialog.vue";
import DataDialog from "./LFComponents/DataDialog.vue";
import {nodeList} from "./config";
import {
  registerStartNode,
  registerDataExtraction,
  registerParamsSplicing,
} from "./registerNode";

export default {
  name: "LF",
  components: {NodePanel, AddPanel, Control, PropertyDialog, DataDialog},
  data() {
    return {
      lf: null,
      flowId: null,
      showAddPanel: false,
      addPanelStyle: {
        top: 0,
        left: 0,
      },
      nodeData: null,
      addClickNode: null,
      clickNode: null,
      dialogVisible: false,
      graphData: null,
      dataVisible: false,
      config: {
        background: {
          backgroundColor: "#f7f9ff",
        },
        grid: {
          size: 10,
          visible: false,
        },
        keyboard: {
          enabled: true,
        },
        edgeTextDraggable: true,
        hoverOutline: false,
      },
      moveData: {},
      nodeList,
    };
  },
  mounted() {
    this.$_initLf();
  },
  methods: {
    $_initLf() {
      // 画布配置
      const lf = new LogicFlow({
        ...this.config,
        plugins: [Menu, MiniMap, Snapshot],
        container: this.$refs.container,
      });
      this.lf = lf;
      // 设置主题
      lf.setTheme({
        circle: {
          stroke: "#000000",
          strokeWidth: 1,
          outlineColor: "#88f",
        },
        rect: {
          outlineColor: "#88f",
          strokeWidth: 1,
        },
        polygon: {
          strokeWidth: 1,
        },
        polyline: {
          stroke: "#000000",
          hoverStroke: "#000000",
          selectedStroke: "#000000",
          outlineColor: "#88f",
          strokeWidth: 1,
        },
        nodeText: {
          color: "#000000",
        },
        edgeText: {
          color: "#000000",
          background: {
            fill: "#f7f9ff",
          },
        },
      });
      this.$_registerNode();
    },
    // 自定义
    $_registerNode() {
      registerStartNode(this.lf);
      registerDataExtraction(this.lf);
      registerParamsSplicing(this.lf);
      this.$_render();
    },
    $_render() {
      this.$_LfEvent();
      this.lf.render(
          {
            "nodes":
                [
                  {
                    "id":
                        "42dca9b5-0029-4b0b-a7df-740ecba0d804",
                    "type":
                        "startNode",
                    "x":
                        360,
                    "y":
                        330,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              360,
                          "y":
                              380,
                          "value":
                              "开始节点"
                        }
                  },
                  {
                    "id":
                        "3e028a29-cc8b-4466-8350-7fa3b4e4d197",
                    "type":
                        "dataExtraction",
                    "x":
                        640,
                    "y":
                        190,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              640,
                          "y":
                              240,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "edff9891-b54e-4591-82d2-d511ff9b6d31",
                    "type":
                        "dataExtraction",
                    "x":
                        640,
                    "y":
                        400,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              640,
                          "y":
                              450,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "154e897f-dacd-4f02-bbee-91d48bd61ae6",
                    "type":
                        "dataExtraction",
                    "x":
                        810,
                    "y":
                        190,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              810,
                          "y":
                              240,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "c3efbb9b-72af-4e4b-b4e8-2f0c4a806c5f",
                    "type":
                        "dataExtraction",
                    "x":
                        810,
                    "y":
                        400,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              810,
                          "y":
                              450,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "fb2f9e66-cea0-4e62-bb66-0317a6f61716",
                    "type":
                        "dataMerge",
                    "x":
                        1020,
                    "y":
                        310,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              1020,
                          "y":
                              360,
                          "value":
                              "合并节点"
                        }
                  },
                  {
                    "id":
                        "a3b805d1-105d-4cb9-9aa6-e0f96effcd1f",
                    "type":
                        "dataExtraction",
                    "x":
                        490,
                    "y":
                        540,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              490,
                          "y":
                              590,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "cc2c7313-3608-467e-8c6e-af402f83508d",
                    "type":
                        "startNode",
                    "x":
                        500,
                    "y":
                        280,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              500,
                          "y":
                              330,
                          "value":
                              "开始节点"
                        }
                  },
                  {
                    "id":
                        "aafa3edd-371a-461b-8b5b-136e8e09c3ff",
                    "type":
                        "dataExtraction",
                    "x":
                        810,
                    "y":
                        540,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              810,
                          "y":
                              590,
                          "value":
                              "普通节点"
                        }
                  },
                  {
                    "id":
                        "d49d3e85-ec7e-4e14-9938-64f8433f7b43",
                    "type":
                        "dataMerge",
                    "x":
                        1260,
                    "y":
                        370,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              1260,
                          "y":
                              420,
                          "value":
                              "合并节点"
                        }
                  },
                  {
                    "id":
                        "42633002-00a7-4115-8f51-75d67bde139e",
                    "type":
                        "dataExtraction",
                    "x":
                        1390,
                    "y":
                        370,
                    "properties":
                        {
                        },
                    "text":
                        {
                          "x":
                              1390,
                          "y":
                              420,
                          "value":
                              "普通节点"
                        }
                  }
                ],
            "edges":
                [
                  {
                    "id":
                        "1bd78d17-4943-4bc4-8cc0-a25e4043260b",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "3e028a29-cc8b-4466-8350-7fa3b4e4d197",
                    "targetNodeId":
                        "154e897f-dacd-4f02-bbee-91d48bd61ae6",
                    "startPoint":
                        {
                          "x":
                              671,
                          "y":
                              190
                        },
                    "endPoint":
                        {
                          "x":
                              779,
                          "y":
                              190
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                671,
                            "y":
                                190
                          },
                          {
                            "x":
                                779,
                            "y":
                                190
                          }
                        ]
                  },
                  {
                    "id":
                        "218948ba-95a6-41e4-b3d9-8a6984648bb3",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "edff9891-b54e-4591-82d2-d511ff9b6d31",
                    "targetNodeId":
                        "c3efbb9b-72af-4e4b-b4e8-2f0c4a806c5f",
                    "startPoint":
                        {
                          "x":
                              671,
                          "y":
                              400
                        },
                    "endPoint":
                        {
                          "x":
                              779,
                          "y":
                              400
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                671,
                            "y":
                                400
                          },
                          {
                            "x":
                                779,
                            "y":
                                400
                          }
                        ]
                  },
                  {
                    "id":
                        "26bf439e-0d36-41d4-9abd-cd6a45f0a5ac",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "154e897f-dacd-4f02-bbee-91d48bd61ae6",
                    "targetNodeId":
                        "fb2f9e66-cea0-4e62-bb66-0317a6f61716",
                    "startPoint":
                        {
                          "x":
                              841,
                          "y":
                              190
                        },
                    "endPoint":
                        {
                          "x":
                              1020,
                          "y":
                              279
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                841,
                            "y":
                                190
                          },
                          {
                            "x":
                                1020,
                            "y":
                                190
                          },
                          {
                            "x":
                                1020,
                            "y":
                                279
                          }
                        ]
                  },
                  {
                    "id":
                        "2e7a8b18-381b-4db6-8ebe-e51589ac00f9",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "c3efbb9b-72af-4e4b-b4e8-2f0c4a806c5f",
                    "targetNodeId":
                        "fb2f9e66-cea0-4e62-bb66-0317a6f61716",
                    "startPoint":
                        {
                          "x":
                              841,
                          "y":
                              400
                        },
                    "endPoint":
                        {
                          "x":
                              1020,
                          "y":
                              341
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                841,
                            "y":
                                400
                          },
                          {
                            "x":
                                1020,
                            "y":
                                400
                          },
                          {
                            "x":
                                1020,
                            "y":
                                341
                          }
                        ]
                  },
                  {
                    "id":
                        "fbe9f4e3-d6ba-4635-8fd1-73bd45efd8ea",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "42dca9b5-0029-4b0b-a7df-740ecba0d804",
                    "targetNodeId":
                        "cc2c7313-3608-467e-8c6e-af402f83508d",
                    "startPoint":
                        {
                          "x":
                              395,
                          "y":
                              330
                        },
                    "endPoint":
                        {
                          "x":
                              465,
                          "y":
                              280
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                395,
                            "y":
                                330
                          },
                          {
                            "x":
                                430,
                            "y":
                                330
                          },
                          {
                            "x":
                                430,
                            "y":
                                280
                          },
                          {
                            "x":
                                465,
                            "y":
                                280
                          }
                        ]
                  },
                  {
                    "id":
                        "316c0787-e708-4f2b-88ef-f424c8296e02",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "42dca9b5-0029-4b0b-a7df-740ecba0d804",
                    "targetNodeId":
                        "a3b805d1-105d-4cb9-9aa6-e0f96effcd1f",
                    "startPoint":
                        {
                          "x":
                              395,
                          "y":
                              330
                        },
                    "endPoint":
                        {
                          "x":
                              459,
                          "y":
                              540
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                395,
                            "y":
                                330
                          },
                          {
                            "x":
                                429,
                            "y":
                                330
                          },
                          {
                            "x":
                                429,
                            "y":
                                540
                          },
                          {
                            "x":
                                459,
                            "y":
                                540
                          }
                        ]
                  },
                  {
                    "id":
                        "ab13e163-0cbf-490a-a393-83dd0d40d626",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "cc2c7313-3608-467e-8c6e-af402f83508d",
                    "targetNodeId":
                        "edff9891-b54e-4591-82d2-d511ff9b6d31",
                    "startPoint":
                        {
                          "x":
                              535,
                          "y":
                              280
                        },
                    "endPoint":
                        {
                          "x":
                              609,
                          "y":
                              400
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                535,
                            "y":
                                280
                          },
                          {
                            "x":
                                579,
                            "y":
                                280
                          },
                          {
                            "x":
                                579,
                            "y":
                                400
                          },
                          {
                            "x":
                                609,
                            "y":
                                400
                          }
                        ]
                  },
                  {
                    "id":
                        "db080716-53c6-46a3-8fdd-9588e6be9ded",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "cc2c7313-3608-467e-8c6e-af402f83508d",
                    "targetNodeId":
                        "3e028a29-cc8b-4466-8350-7fa3b4e4d197",
                    "startPoint":
                        {
                          "x":
                              535,
                          "y":
                              280
                        },
                    "endPoint":
                        {
                          "x":
                              609,
                          "y":
                              190
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                535,
                            "y":
                                280
                          },
                          {
                            "x":
                                579,
                            "y":
                                280
                          },
                          {
                            "x":
                                579,
                            "y":
                                190
                          },
                          {
                            "x":
                                609,
                            "y":
                                190
                          }
                        ]
                  },
                  {
                    "id":
                        "09ae2e2d-3789-457d-ac03-fe63afd55bab",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "a3b805d1-105d-4cb9-9aa6-e0f96effcd1f",
                    "targetNodeId":
                        "aafa3edd-371a-461b-8b5b-136e8e09c3ff",
                    "startPoint":
                        {
                          "x":
                              521,
                          "y":
                              540
                        },
                    "endPoint":
                        {
                          "x":
                              779,
                          "y":
                              540
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                521,
                            "y":
                                540
                          },
                          {
                            "x":
                                779,
                            "y":
                                540
                          }
                        ]
                  },
                  {
                    "id":
                        "19dc91b6-fd72-4d1a-8f0f-99e1186af5e4",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "fb2f9e66-cea0-4e62-bb66-0317a6f61716",
                    "targetNodeId":
                        "d49d3e85-ec7e-4e14-9938-64f8433f7b43",
                    "startPoint":
                        {
                          "x":
                              1051,
                          "y":
                              310
                        },
                    "endPoint":
                        {
                          "x":
                              1260,
                          "y":
                              339
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                1051,
                            "y":
                                310
                          },
                          {
                            "x":
                                1081,
                            "y":
                                310
                          },
                          {
                            "x":
                                1081,
                            "y":
                                309
                          },
                          {
                            "x":
                                1260,
                            "y":
                                309
                          },
                          {
                            "x":
                                1260,
                            "y":
                                339
                          }
                        ]
                  },
                  {
                    "id":
                        "ff620ed9-fd71-4419-8829-d633032182ea",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "aafa3edd-371a-461b-8b5b-136e8e09c3ff",
                    "targetNodeId":
                        "d49d3e85-ec7e-4e14-9938-64f8433f7b43",
                    "startPoint":
                        {
                          "x":
                              841,
                          "y":
                              540
                        },
                    "endPoint":
                        {
                          "x":
                              1260,
                          "y":
                              401
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                841,
                            "y":
                                540
                          },
                          {
                            "x":
                                1260,
                            "y":
                                540
                          },
                          {
                            "x":
                                1260,
                            "y":
                                401
                          }
                        ]
                  },
                  {
                    "id":
                        "1ad98813-63db-4e52-b618-ec36a8bd72ab",
                    "type":
                        "polyline",
                    "sourceNodeId":
                        "d49d3e85-ec7e-4e14-9938-64f8433f7b43",
                    "targetNodeId":
                        "42633002-00a7-4115-8f51-75d67bde139e",
                    "startPoint":
                        {
                          "x":
                              1291,
                          "y":
                              370
                        },
                    "endPoint":
                        {
                          "x":
                              1359,
                          "y":
                              370
                        },
                    "properties":
                        {
                        },
                    "pointsList":
                        [
                          {
                            "x":
                                1291,
                            "y":
                                370
                          },
                          {
                            "x":
                                1359,
                            "y":
                                370
                          }
                        ]
                  }
                ]
          });
    },
    $_getData() {
      const data = this.lf.getGraphData();
      console.log(JSON.stringify(data));
    },
    $_LfEvent() {
      this.lf.on("node:click", ({data}) => {
        this.$data.clickNode = data;
        this.$data.dialogVisible = true;
      });
      this.lf.on("element:click", () => {
        this.hideAddPanel();
      });
      this.lf.on("node:dnd-add", ({data}) => {
        this.$emit("node-add", data);
      });
      this.lf.on("edge:add", ({data}) => {
        console.log("edge:add", data);
      });
      this.lf.on("node:mousemove", ({data}) => {
        this.moveData = data;
      });
      this.lf.on("blank:click", () => {
        this.hideAddPanel();
      });
      this.lf.on("connection:not-allowed", (data) => {
        this.$message({
          type: "error",
          message: data.msg,
        });
      });
      this.lf.on("node:mousemove", () => {
        console.log("on mousemove");
      });
    },
    hideAddPanel() {
      this.$data.showAddPanel = false;
      this.$data.addPanelStyle.top = 0;
      this.$data.addPanelStyle.left = 0;
      this.$data.addClickNode = null;
    },
    closeDialog() {
      this.$data.dialogVisible = false;
    },
    $_catData() {
      this.$data.graphData = this.$data.lf.getGraphData();
      this.$data.dataVisible = true;
    },
  },
};
</script>
<style>
.logic-flow-view {
  height: 100vh;
  position: relative;
}

.demo-title {
  text-align: center;
  margin: 20px;
}

.demo-control {
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 2;
}

#LF-view {
  width: 100%;
  height: 90%;
  outline: none;
}

.time-plus {
  cursor: pointer;
}

.add-panel {
  position: absolute;
  z-index: 11;
  background-color: white;
  padding: 10px 5px;
}

.el-drawer__body {
  height: 80%;
  overflow: auto;
  margin-top: -30px;
  z-index: 3;
}

@keyframes lf_animate_dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>
